<template>
	<view class="content">
		<!-- 		<hxNavbar :config="config"></hxNavbar> -->
		<f-navbar title="购物车" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="contentbox" v-if="token">
			<view class="one" v-if="cartList.length>0">
				<view class="contentbox_topbox">
					<view class="contentbox_topboxL" @click="editcart" :class="isshowedit?'editactive':''">
						{{isshowedit?'完成':'编辑'}}</view>
					<!-- <view class="contentbox_topboxR" @click="ongengxin">更新</view> -->
				</view>
				<view class="cart_box" v-for="(item,index) of cartList" :key="index" >
					<view class="cart_boxinput">
						<checkbox-group @change="selected(item)">
							<!-- <label> -->
								<checkbox :checked="item.flag" color="#EF0E6C" style="transform:scale(0.8)"
									class="round red" />
<!-- 							</label> -->
					</checkbox-group>
						<view class="cart_boximgbox" >
							<image class="cart_boximg" :src="item.good_img" mode=""></image>
							<view class="cart_boxright">
								<view class="cart_boxrighttitle" @click="ondetail(item)">
									<view class="cart_boxrighttitleL">
										{{item.title}}
									</view>

									<van-icon class="title_righticon" name="arrow" color="#999" size="14" />
								</view>
								<view class="cart_boxrighttxt">{{item.spec_title}}</view>
								<view class="cart_boxrightdazhe" v-if="item.is_activity==1">
									<view class="cart_boxrightdazheL" v-if="item.origin_price!==''"> 原价:<text
											class="cart_priceicon">￥</text><text
											class="cart_price">{{item.origin_price}} </text> </view>
									<view class="cart_boxrightdazheR" v-if="item.low_price">最低价:<text
											class="cart_priceiconR">￥</text><text class="cart_priceR">{{item.low_price}}
										</text> </view>
								</view>
								<view class="cart_boxright_bottom">
									<view class="cart_boxright_bottomL">现拼单价:<text
											class="cart_boxright_bottomLicon">￥</text><text
											class="cart_boxright_bottomLprice">{{item.now_price}}</text></view>
									<view class="cart_boxright_bottomR">
										<view class="cart_reduce" @click.stop="reduce_cartnum(item)">-</view>
										<view class="cart_input">
											<input class="num_input" :value="item.cart_num" :data-obj="item" :data-id="index" type="number"
												@input.stop="cartnuminput" @focus.stop="onfocus">
										</view>
										<view class="cart_add" @click.stop="add_cartnum(item)">+</view>
									</view>
								</view>
							</view>
						</view>
					</view>


				</view>
				<view class="bottombox"></view>
				<view class="cart_bottombox">
					<view class="cart_bottomboxL">
						<checkbox-group @change="seletegoods()">
							<checkbox :checked="allchecked" color="#EF0E6C" style="transform:scale(0.8)"
								class="round red allchecked" />全选
						</checkbox-group>
						<!-- <van-checkbox class="allchecked" :value="allchecked" @change="onChangeAll" checked-color="#EB136E">全选</van-checkbox> -->
						<view class="cart_bottom_txt" v-show="!isshowedit">
							共<text class="shopnum">{{totalNum}}</text>件商品 &nbsp;&nbsp;合计：<text class="cartprice">￥{{totalPrice}}</text>
						</view>
					</view>

					<view class="jiesuanbtn" v-show="!isshowedit" @click="onsubmit">结算</view>
					<view class="deletebtn" v-show="isshowedit" @click="ondeletecart">删除</view>
				</view>
			</view>
			<view class="two" v-else>
				<!-- <view class="no-cartimg"> -->
				<image class="no-cartimg" :src="imgurl+'no-cart.png'" mode=""></image>
				<!-- </view> -->
				<view class="nocart-txt">
					购物车空空如也
				</view>
				<view class="nocart-txt1">
					快去首页逛逛吧~
				</view>
			</view>

		</view>
		<view class="gologinbox" v-if="!token">
			<image class="gologinimg" :src="imgurl+'cartgologin.png'" mode=""></image>
			<view class="gologin_btn" @click="gologin">
				去登录
			</view>
		</view>

	</view>

</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	// import { watch } from "vue";
	import {
		getCartList,
		serCartNum,
		delCart
	} from '../../utils/app.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				checked: false,
				numvalue: '1', // 加入购物车数量
				allchecked: false,
				isshowedit: false, // 是否编辑
				imgurl: getApp().globalData.imgurl,
				token: uni.getStorageSync('token'),
				cartList: [],
				// flag:false,
			};
		},
		onLoad(){
			this.getList()
		},
		created() {
			
		this.getList()
		},
		onShow() {
			this.getList()
			this.allchecked = false
		},
		methods: {
			// 结算提交
			onsubmit(){
				console.log(this.cartList);
				let flagitem = this.cartList.filter(item=>item.flag)
				if(flagitem.length>0){
					var data = flagitem.map(item=>item.cart_id).join(',')
					console.log(data);
					 data = (data.substring(data.length - 1) == ',') ? data.substring(0, data.length - 1) : data;
					 console.log(data);
					uni.navigateTo({
						url:'/pages/confirmOrder/confirmOrder?cartids='+data+'&froms='+2
					})
				} else {
					uni.showToast({
						title: '请先选择要购买的商品！',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				
			},
			
			// 跳转到详情页
			ondetail(e){
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?codeid='+e.code
				})
			},
			
			// 删除购物车
			ondeletecart(){
				console.log(this.cartList);
				var list = this.cartList.map(item=>{
					if(item.flag){
						return item.cart_id
					}
				}).join(',')
				console.log(list);
				delCart({
					cart_ids: list
				}).then(res => {
					console.log(res.data);
					this.getList()
				
				})
			},
			// 更新
			ongengxin(){
				this.getList()
			},
			// 获取购物车列表
			
			getList() {
				this.token =  uni.getStorageSync('token')
				getCartList({
					// api-token:this.token
				}).then(res => {
					console.log(res.data);
					if(res.code==1){
					this.cartList = res.data
					console.log(this.cartList);	
					} else {
						
					}


				})
			},
			// 去登录
			gologin() {
				uni.navigateTo({
					url: '/pages/subPack/Login/Login'
				})
			},
			// 点击编辑
			editcart() {
				console.log(this.isshowedit);
				this.isshowedit = !this.isshowedit
				this.allchecked = false
				this.getList()
			},
			// 购物车数量加一
			add_cartnum(item) {
				// this.numvalue++
				item.cart_num++
				console.log(item.cart_num);
				serCartNum({
					cart_id: item.cart_id,
					cart_num:item.cart_num, 
					type:'1'
				}).then(res => {
					console.log(res);
					// this.getList()
					// this.cartList.cart_num = res.data.cart_num
				})
			},
			// 购物车数量输入
			cartnuminput(e) {
				console.log(e);
				e.currentTarget.dataset.obj.cart_num = e.detail.value
				// this.numvalue = e.detail.value
				serCartNum({
					cart_id: e.currentTarget.dataset.obj.cart_id,
					cart_num:e.detail.value, 
					type:'3'
				}).then(res => {
					// this.getList()
					 this.cartList[e.currentTarget.dataset.id].cart_num = Number(res.data.cart_num)
				})
			},
			// 购物车商品数量减一
			reduce_cartnum(item) {
				let num = item.cart_num
				if (item.cart_num >1) {
					item.cart_num--
					serCartNum({
						cart_id: item.cart_id,
						cart_num:item.cart_num, 
						type:'2'
					}).then(res => {
						// this.getList()
						// this.cartList.cart_num = res.data.cart_num
						
					})
				} else{
					uni.showToast({
						title: '最少购买一件哦！',
						duration: 2000,
						icon: 'none'
					});
					return
				}


			},
			//选择购物车商品
			selected(item) {
				// console.log(this.cartList[index].isSelect)
				// this.cartList[index].isSelect = !this.cartList[index].isSelect
				item.flag = !item.flag
				if (!item.flag) {
					this.allchecked = false
				} else {
					const a = this.cartList.every(item => {
						return item.flag === true
					})
					if (a) {
						this.allchecked = true
					} else {
						this.allchecked = false
					}
				}
				console.log(item);
				console.log(this.cartList);
			},
			// 全选
			seletegoods() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.cartList.map(item => {
						// this.checked = true
						item.flag = true
					})
				} else {
					// this.checked = false
					this.cartList.map(item => {
						item.flag = false
					})
				}
			},

		},
		computed:{
			totalNum(){
				let totalNum = 0;
				this.cartList.map(item => {
				    item.flag ? totalNum += item.cart_num : totalNum += 0
				})
				return totalNum
			},
			
			totalPrice() {
			    let totalPrice = 0;
			    this.cartList.map(item => {
			        item.flag ? totalPrice += item.cart_num * Number(item.now_price) : totalPrice += 0
			    })
				totalPrice = totalPrice.toFixed(2)
			    return totalPrice
			}
		}

	};
</script>

<style>
	page {
		background: #eee;
	}

	.contentbox {
		/* 	width: 750rpx;
		height: 1000rpx;
		background: #000;
		margin-top: 10rpx; */
	}

	.contentbox_topbox {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 20rpx 0;
	}

	.two {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.no-cartimg {
		width: 327rpx;
		height: 326rpx;
		margin-top: 200rpx;
	}

	.nocart-txt {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 60rpx;
		margin-top: 60rpx;
	}

	.nocart-txt1 {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		line-height: 60rpx;
	}

	.contentbox_topboxL {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333;
		margin-right: 30rpx;
	}

	.contentbox_topboxR {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF5A00;
		margin-right: 30rpx;
		/* margin-left: 38rpx; */
	}

	.cart_box {
		margin: 0 auto;
		width: 690rpx;
		/* height: 261rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 20rpx 0;
	}

	.cart_boxinput {
		margin-left: 10rpx;
		display: flex;
		align-items: center;

	}

	.cart_boximgbox {
		display: flex;
		align-items: center;
	}

	.cart_boximg {
		width: 180rpx;
		height: 180rpx;
		/* background: #FF0000; */
		border-radius: 10rpx;
		/* margin-left: 10rpx; */
	}

	.cart_boxright {
		width: 70%;
		margin-left: 19rpx;
	}

	.cart_boxrighttitle {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}
	.cart_boxrighttitleL{
		width:300rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title_righticon {
		margin-left: 15rpx;
	}

	.cart_boxrighttxt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
		margin-top: 16rpx;
	}

	.cart_boxrightdazhe {
		display: flex;
		align-items: center;
		margin-top: 19rpx;
	}

	.cart_boxrightdazheL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #555555;
		line-height: 24rpx;
		margin-right: 38rpx;

	}

	/*每个页面公共css */
	/* //设置圆角 */
	checkbox.round .wx-checkbox-input,
	checkbox.round .uni-checkbox-input {
		border-radius: 100rpx;
		border: 3rpx solid #EF0E6C;
	}

	/* //设置背景色 */
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input {
		background-color: #ffffff !important;
		border-color: #EF0E6C !important;
		color: #EF0E6C !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		content: '\2022';
	}

	.cart_priceicon {
		font-size: 14rpx
	}

	.cart_price {
		font-size: 28rpx;
		font-weight: 600;
	}

	.cart_boxrightdazheR {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF5A00;
		line-height: 24rpx;
	}

	.cart_priceiconR {
		font-size: 14rpx
	}

	.cart_priceR {
		font-size: 28rpx;
		font-weight: 600;
	}

	.cart_boxright_bottom {
		width: 415rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.cart_boxright_bottomL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 28rpx;
	}

	.cart_boxright_bottomR {
		/* width: 146rpx; */
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		margin-top: 19rpx;
		justify-content: space-between;

	}

	.cart_boxright_bottomLicon {
		font-size: 20rpx;
		font-weight: 700;
	}

	.cart_boxright_bottomLprice {
		font-weight: 700;
		font-size: 28rpx
	}

	.cart_reduce {
		width: 52rpx;
		height: 42rpx;
		border: 2rpx solid #bbb;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
		font-size: 36rpx;
		line-height: 42rpx;
		text-align: center;
		color: #bbb;
	}

	.cart_input {
		width: 62rpx;
		height: 42rpx;
		border-top: 2rpx solid #bbb;
		border-bottom: 2rpx solid #bbb;
		text-align: center;
		line-height: 42rpx;
	}

	.cart_add {
		width: 52rpx;
		height: 42rpx;
		border: 2rpx solid #bbb;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		color: #999;
		line-height: 42rpx;
		text-align: center;
	}

	.num_input {
		width: 62rpx;
		height: 42rpx;
	}

	.editactive {
		color: #FE0000;
	}

	/* 底部全选 */
	.bottombox {
		width: 100%;
		height: 100rpx;
		margin-top: 100rpx;
	}

	.cart_bottombox {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		z-index: 999;
	}

	.cart_bottomboxL {
		display: flex;
		align-items: center;
	}

	.allchecked {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		/* line-height: 70rpx; */
	}

	.cart_bottom_txt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 30rpx;
		/* line-height: 70rpx; */
	}

	.shopnum {
		color: #FF0000;
	}

	.cartprice {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
	}

	.jiesuanbtn {
		width: 154rpx;
		height: 64rpx;
		background: #EF0E6C;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 64rpx;
		margin-right: 30rpx;
		text-align: center;
	}

	.deletebtn {
		width: 155rpx;
		height: 65rpx;
		border: 1px solid #999999;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 65rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.gologinbox {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}

	.gologinimg {
		width: 371rpx;
		height: 359rpx;
		margin-top: 46rpx;
	}

	.gologin_btn {
		width: 690rpx;
		height: 88rpx;
		background: #EF0E6C;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
		margin-top: 46rpx;
	}
</style>